<template>
    <div class="container">
        <div class="content">
            当前用户ID：{{user.id}}
            <el-form ref="form" label-width="100px">
                <el-form-item label="点对点/群发" :model="msg">
                    <el-input v-model="msg.from" size="medium" style="width: 300px;" placeholder="from"></el-input>
                    <el-input v-model="msg.to" size="medium" style="width: 300px;" placeholder="to"></el-input>
                    <el-input v-model="msg.message" size="medium" style="width: 300px;" placeholder="消息"></el-input>
                    <el-button type="primary" size="medium" @click="chat">发送</el-button>
                </el-form-item>

            </el-form>
            <el-button type="primary" size="medium" @click="sendMessageToSubscribeOrder">发送订阅消息</el-button>
            
        </div>

        <div class="content margin-top-10">
            <ul>
                <li v-for="(item, index) in receive" :key="index">{{index}}===>{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import SockJS from 'sockjs-client'
    import Stomp from 'stompjs'
    import http from '@/utils/http';
    import { mapGetters } from 'vuex'

    let stomp
    export default {
        name: 'websocket',
        data() {
            return {
                message1: null,
                message2: null, 
                receive: [], 
                msg: {
                    type: null,
                    from: null,
                    to: null,
                    message: null
                }
            }
        },
        computed: {
            ...mapGetters(['user'])
        },
        created() {
            this.SockJSConnect()
            this.msg = Object.assign({}, this.msg, {from: this.user.id})
        },
        methods: {

            SockJSConnect() {
                const _this = this
                let sock = new SockJS('http://localhost:8888/websocket')
                stomp = Stomp.over(sock);
                //console.log(stomp)

                stomp.connect({}, function(frame) {
                    console.log('连接成功...')

                    stomp.subscribe('/subscribeOrderNotification', function(response) {
                        console.log('已经成功订阅[用户下单消息提醒]')
                        console.log(response)
                    })

                    _this.subscribeOrderNotification()

                    _this.subscribeChat()
                    
                }, function() {
                    console.log('连接失败...')
                });
            },

            chat() {
                let data = JSON.stringify(this.msg)
                stomp.send('/chat', {}, data);
            },
            subscribeChat() {
                stomp.subscribe('/user/'+this.user.id+'/chat/getResponse', function(response) {
                    console.log("聊天消息：" + response.body) 
                })
            },

            sendMessageToSubscribeOrder() {
                let data = JSON.stringify({"type": "OrderNotification", "from": '0001', "to": '0002', "message": '用户下单成功'})
                stomp.send('/sendMsgToSubscribeOrderNotification', {}, data);
            },
            subscribeOrderNotification() {
                stomp.subscribe('/topic/subscribeOrderNotification', function(response) {
                    console.log("订阅的消息：" + response.body) 
                })
            },

            
            // SockJSConnect() {
            //     const _this = this
            //     let sock = new SockJS('http://localhost:8888/portfolio')
            //     let stomp = Stomp.over(sock);//使用STMOP子协议的WebSocket客户端
            //     //let socket = new SockJS('http://gateway.bojun.com/websocket/sockjs/aa')

            //     sock.onopen = function() {
            //         console.log('open');
            //         stomp.send('/aloneRequest', {}, "xxxxxxxxxxxxxxxxxxxxxxxxxxx");

            //         stomp.subscribe('/user/0001/alone/getResponse',function(response){
            //             console.log('=========='+response)
            //         });
            //     };

            //     sock.onmessage = function(e) {
            //         console.log('message', e.data);
            //         sock.close();
            //     };

            //     sock.onclose = function() {
            //         console.log('close');
            //     };
            // }
        }
    }
</script>

<style scoped>

</style>